<template>
	<view>
		<movable-area style="position: absolute;left: 0;bottom: 0;border-top: 1rpx solid red;"
			:style="{width: `${width}px`, height: `${height-100}px`}" v-if="height">
			<movable-view class="movable-view" direction="vertical"
				style="background-color: #FFFFFF;bottom: 0;left: 0;z-index: 9999;" :friction="1" :damping="100"
				:out-of-bounds="true" :inertia="true" :x="0" :y="moveYtoMax" @change="test.change"
				:style="{width: `${width}px`, height: `100px`}">
				<view style="display: flex;flex-direction: row;justify-content: center;">
					<view class="hand-mark"></view>
					<view>{{ test.y }}</view>
				</view>
			</movable-view>
			<view class="content" :style="{paddingTop: `${mViewHeight}px`, borderTopLeftRadius: `${mViewHeight > 100 ? 0 : '30'}rpx`, borderTopRightRadius: `${mViewHeight > 100 ? 0 : '30'}rpx`,}">
			</view>
		</movable-area>
	</view>
</template>

<!-- #ifdef MP-WEIXIN -->
// <script module="test" lang="wxs">
// 	var startY = 0;
// 	function change(e, ins) {
// 		console.log(JSON.stringify(e.detail));
// 		startY = e.detail.y;
// 	}
// 	module.exports = {
// 		msg: 'hello',
// 		change: change
// 		y: startY
// 	}
// </script>
<!-- #endif -->
<script>
	var sysinfo = null;
	let timer;
	export default {
		data() {
			return {
				width: 0,
				height: 0,
				moveY: 0,
				mViewHeight: 100, // 可移动view的实时高度
				moveYtoMax: 0,
				isOutOfBounds: false,
			}
		},
		onReady() {
			sysinfo = uni.getSystemInfoSync();
			console.log(sysinfo);
			this.width = sysinfo.windowWidth;
			this.height = sysinfo.windowHeight;
			this.mViewHeight = 100;
			this.moveYtoMax = this.height;
			this.moveY = this.moveYtoMax;
		},
		methods: {
			change(e) {
				let y = e.detail.y;
				// console.log(e);
				// console.log(e.detail.y);
				console.log(`上次移动位置：${this.moveY}`);
				console.log(`窗口高度：${this.height}`);
				// if (y < (this.height - 100 - 100)) {
				// 	this.moveYtoMax = 0;
				// }
				// if (y < this.moveY) {
				// 	console.log('移动方向：上');
				// 	this.moveYtoMax = 0;
				// } else {
				// 	console.log('移动方向：下');
				// 	this.moveYtoMax = this.height;
				// }
				this.moveY = e.detail.y; // 记录上次移动的位置
				// console.log(e);
				// 计算移动的高度 公式：可移动区域的高度 - (y+可移动view的初始高度)
				this.isOutOfBounds = true;
				this.mViewHeight = this.height - y - 100 - 30;
				// let moveY = (this.height) - (y+100);
				// // console.log(`移动高度：${moveY}`);
				// if (moveY > 0) {
				// 	this.mViewHeight = moveY+100;
				// }
				// this.moveYtoMax += this.moveY;
				// if (this.moveY < )
				// this.mViewHeight = this.moveY+100;
				// if (moveY < 200) {
				// 	this.mViewHeight = 100;
				// }
				// this.mViewHeight += this.moveY;
			}
		}
	}
</script>

<style>
	page {
		background-color: #18BC37;
	}

	.movable-view {
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
	}

	.hand-mark {
		margin: 20rpx 0;
		width: 70rpx;
		height: 12rpx;
		background-color: #EDEDED;
		border-radius: 60rpx;
	}

	.content {
		height: 0px;
		width: 750rpx;
		background-color: #FFFFFF;
		position: absolute;
		bottom: 0;
		left: 0;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
	}
</style>
